<template>
    <div>
        <el-dialog :width="dialog.width || '40%'"
                   :visible="dialog.visible"
                   :modal-append-to-body="false"
                   :close-on-click-modal="false"
                   @close="close">
            <div slot="title" class="text-center">
                <span class="font-s20">
                    <icon name="edit"></icon>
                    编辑角色
                </span>
            </div>
            <el-form ref="modelForm"
                     size="medium"
                     label-position="top"
                     :model="model"
                     :rules="rules"
                     :inline-message="true"
                     :status-icon="true">
                <el-scrollbar :native="false"
                              class="r-custom-scrollbar custom-scroll-height">
                    <div class="pl-20 pr-20">
                        <el-form-item label="名称" prop="name">
                            <el-input placeholder="名称"
                                      v-model="model.name">{{ model.name }}</el-input>
                        </el-form-item>

                        <el-form-item label="图标" prop="icon">
                            <el-input placeholder="选择或填写" v-model="model.icon" class="input-with-select">
                                <el-button type="primary"
                                           slot="append"
                                           @click="openIconSelector">
                                    <icon name="mouse-selection"></icon> 选择
                                </el-button>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="描述" prop="description">
                            <el-input type="textarea"
                                      rows="2"
                                      v-model="model.description"
                                      :maxlength="50"
                                      show-word-limit>{{ model.description }}</el-input>
                        </el-form-item>
                    </div>
                </el-scrollbar>
                <div class="mt-20 text-right">
                    <el-button type="text" size="medium" @click="close">取消</el-button>
                    <el-button type="primary"
                               size="medium"
                               icon="moe-icon moe-icon-save"
                               :loading="saveLoading"
                               native-type="submit"
                               @click="submitForm('modelForm')">确定
                    </el-button>
                </div>
            </el-form>
        </el-dialog>
        <icon-selector :visible="iconSelectorVisible" @close="closeIconSelector" @confirm="confirmIcon"></icon-selector>
    </div>
</template>

<script lang="ts">
import { Component, Emit, Prop } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import { namespace } from 'vuex-class'

import IconSelectorMixins from '@/mixins/icon-selector'
import { errorMessage, successMessage, toJson } from '@/utils'

const roleModule = namespace('cms/role')

@Component
export default class Create extends mixins(IconSelectorMixins) {
  @Prop({type: Object, default: {visible: false}}) dialog!: any

  // Vuex
  @roleModule.State role!: any
  @roleModule.Action update!: (payload: any) => Promise<any>

  // form 模型
  private model: any = {
    name: '',
    icon: '',
    description: ''
  }

  // 验证规则
  private rules: any = {
    name: [
      {required: true, message: '请填写标识', trigger: 'blur'}
    ]
  }

  private saveLoading: boolean = false

  // 钩子
  created() {
    this.model = toJson(this.role)
  }

  /**
   * 提交表单
   *
   * @param name
   */
  private submitForm(name: string): void | boolean {
    (this.$refs[name] as any).validate((valid: boolean) => {
      if (valid) {
        this.saveLoading = true
        this.update({id: this.model.id, index: this.dialog.index, param: this.model}).then((res: any) => {
          this.saveLoading = false
          if (res.status !== 200) {
            errorMessage(res.message)
            return false
          }

          successMessage(res.message)
          this.close()
        }).catch((err: any) => {
          this.saveLoading = false
        })
      }
    })
  }

  /**
   * 重置表单
   *
   * @param name
   */
  private resetForm(name: string): void {
    (this.$refs[name] as any).resetFields()
  }


  /**
   * 选定图标
   *
   * @param val
   * @private
   */
  private confirmIcon(val: string): void {
    this.model.icon = val
    this.closeIconSelector()
  }

  @Emit()
  close(): void {
    this.resetForm('modelForm')
    this.saveLoading = false
  }
}
</script>

<style lang="scss" scoped>
.custom-scroll-height {
    height: 400px;
}
</style>
